import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v0/Components/Checkbox Migration" />

# Checkbox Migration

Fluent UI Northstar (v0) provides the `Checkbox` control to make a choice between two mutually exclusive options. Fluent UI v9 provides a `Checkbox` control, but has a different API.

The main difference between v0 and v9 `Checkbox` is that v9 offers a circular variant and does not provide a toggle prop.

## Examples

### Basic Migration

Basic usage of `Checkbox` v0

```tsx
import * as React from 'react';
import { Checkbox } from '@fluentui/react-northstar';

const CheckboxV0BasicExample = () => {
  return (
    <>
      <Checkbox checked label="Checked" />
      <Checkbox disabled label="Disabled" />
      <Checkbox checked="mixed" label="Mixed" />
    </>
  );
};
```

An equivalent `Checkbox` in v9 is

```tsx
import * as React from 'react';
import { Checkbox } from '@fluentui/react-components';

const CheckboxV9BasicExample = () => {
  return (
    <>
      <Checkbox checked label="Checked" />
      <Checkbox disabled label="Disabled" />
      <Checkbox checked="mixed" label="Mixed" />
    </>
  );
};
```

## Prop Mapping

This table maps `Checkbox` v0 props to the `Checkbox` v9 equivalent.

| v0               | v9               | Notes                                                       |
| ---------------- | ---------------- | ----------------------------------------------------------- |
| `accessibility`  | n/a              |                                                             |
| `as`             | n/a              |                                                             |
| `checked`        | `checked`        | Mutually exclusive with `defaultChecked`                    |
| `className`      | `className`      |                                                             |
| `defaultChecked` | `defaultChecked` | Mutually exclusive with `checked`                           |
| `design`         | n/a              |                                                             |
| `disabled`       | `disabled`       |                                                             |
| `indicator`      | `indicator`      |                                                             |
| `key`            | `key`            | v9 uses the intrinsic React prop                            |
| `label`          | `label`          |                                                             |
| `labelPosition`  | `labelPosition`  |                                                             |
| `onChange`       | `onChange`       |                                                             |
| `onClick`        | `onClick`        |                                                             |
| `ref`            | `ref`            |                                                             |
| `styles`         | `className`      |                                                             |
| `toggle`         | n/a              | Refer to the `Switch` component in `@fluentui/react-switch` |
| `variables`      | n/a              | Use `FluentProvider` to customize themes                    |
